
const path = require("path"); 

const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPluginConfig = {
    template : './src/index.html' , /* 指定模板文件 */
    filename : 'index.html' /* 指定预览页面文件名称 */
}

const htmlPlugin = new HtmlWebpackPlugin( htmlPluginConfig );

const {VueLoaderPlugin} = require( "vue-loader" );
const vuePlugin = new VueLoaderPlugin();

module.exports = {
	mode : 'development',
    /* 为开发期间使用的服务器提供配置 */
    devServer: {
        port: 8090,
        open: false,
        static: {
            directory: path.resolve( __dirname )
        }
    },
    // 配置插件
    plugins: [ htmlPlugin , vuePlugin ],
    // 配置模块
    module : {
        // 配置 loader
        rules: [
            // 正则表达式 `/\.css$/` 表示以 `.css` 为后缀
            { test: /\.css$/ , use: [ 'style-loader' , 'css-loader' ] },
            // 正则表达式 `/\.less$/` 表示以 `.less` 为后缀
            { test: /\.less$/, use:[ 'style-loader' , 'css-loader' , 'less-loader' ] },
            // 处理图片
            { 
              test: /\.jpg|png|gif|bmp|webp$/,
              type: 'asset/resource',
              generator: {
                  filename: 'images/[name].[hash:8][ext]',
              }
            },
            // 处理字体
            { 
              test: /\.ttf|eot|svg|woff|woff2|otf$/,
              type: 'asset/resource',
              generator: {
                  filename: 'fonts/[name].[hash:8][ext]',
              }
            },
            // 处理Vue单文件组件
            { test:/\.vue$/, use:['vue-loader'] }
        ]
    }
}